    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let originalImage = null; // 存储原始图片

    // 处理上传的图片
    document.getElementById('upload').addEventListener('change', (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
    const img = new Image();
    img.onload = () => {
    originalImage = img; // 保存原始图片
    // 设置画布大小
    canvas.width = img.width;
    canvas.height = img.height;

    // 绘制原始图片
    ctx.drawImage(img, 0, 0);
    drawWatermark(); // 绘制初始水印
};
    img.src = e.target.result;
};

    if (file) {
    reader.readAsDataURL(file);
}
});

    // 更新水印旋转角度的显示值
    document.getElementById('rotation').addEventListener('input', (event) => {
    document.getElementById('rotationValue').textContent = event.target.value;
    drawWatermark(); // 实时更新水印
});

    // 更新透明度和列间距的显示值
    document.getElementById('opacity').addEventListener('input', (event) => {
    const value = (event.target.value / 10).toFixed(1); // 转换为 0.0 - 1.0 的值
    document.getElementById('opacityValue').textContent = value;
    drawWatermark(); // 实时更新水印
});

    document.getElementById('hSpacing').addEventListener('input', (event) => {
    document.getElementById('hSpacingValue').textContent = event.target.value;
    drawWatermark(); // 实时更新水印
});

    // 更新行间距的显示值
    document.getElementById('vSpacing').addEventListener('input', (event) => {
    document.getElementById('vSpacingValue').textContent = event.target.value;
    drawWatermark(); // 实时更新水印
});

    // 更新字体大小的显示值
    document.getElementById('fontSize').addEventListener('input', (event) => {
    document.getElementById('fontSizeValue').textContent = event.target.value;
    drawWatermark(); // 实时更新水印
});

    // 更新水印内容的显示
    document.getElementById('watermarkText').addEventListener('input', drawWatermark);

    // 添加水印
    document.getElementById('font').addEventListener('change', drawWatermark);

    // 实时绘制水印
    function drawWatermark() {
    if (!originalImage) return; // 如果没有原始图片，返回

    // 清空画布，重新绘制原始图像
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(originalImage, 0, 0);

    const opacity = parseFloat(document.getElementById('opacity').value) / 10; // 转换为 0.0 - 1.0 的值
    const horizontalSpacing = parseFloat(document.getElementById('hSpacing').value);
    const verticalSpacing = parseFloat(document.getElementById('vSpacing').value);
    const fontSize = parseFloat(document.getElementById('fontSize').value);
    const font = document.getElementById('font').value;
    const rotation = parseFloat(document.getElementById('rotation').value); // 获取旋转角度
    const watermarkText = document.getElementById('watermarkText').value; // 获取水印文本

    // 添加水印
    addWatermark(watermarkText, rotation, fontSize, horizontalSpacing, verticalSpacing, opacity, font);
}

    // 添加水印
    function addWatermark(text, angle, fontSize, horizontalSpacing, verticalSpacing, opacity, font) {
    ctx.save(); // 保存当前状态
    ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`; // 设置水印颜色
    ctx.font = `${fontSize}px ${font}`; // 设置动态字体和大小
    ctx.textAlign = 'center'; // 文本居中对齐

    // 绘制水印文本
    for (let y = 0; y < canvas.height; y += verticalSpacing) {
    for (let x = 0; x < canvas.width; x += horizontalSpacing) {
    ctx.save(); // 保存当前状态
    ctx.translate(x, y); // 移动到指定位置
    ctx.rotate(angle * Math.PI / 180); // 旋转文本
    ctx.fillText(text, 0, 0); // 在新的位置绘制文本
    ctx.restore(); // 恢复状态
}
}

    ctx.restore(); // 恢复状态
}

    // 保存图片
    document.getElementById('saveBtn').addEventListener('click', () => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png'); // 获取图像数据URL
    link.download = 'watermarked-image.png'; // 设置下载的文件名
    link.click(); // 触发下载
});
